<!DOCTYPE html>
<html lang="zh">
<head>
    <title>编辑</title>
    <link rel="stylesheet" href="/static/3part/editor.md-master/examples/css/style.css"/>
    <link rel="stylesheet" href="/static/3part/editor.md-master/css/editormd.css"/>
    <link rel="stylesheet" href="/static/3part/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
    <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon"/>
    <script src="/static/3part/editor.md-master/examples/js/jquery.min.js" type="text/javascript"></script>
    <script src="/static/3part/editor.md-master/editormd.min.js" type="text/javascript"></script>
    <script src="/static/3part/bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="/static/3part/editor.md-master/lib/flowchart.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse nav-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <a href="#" id="title" class="navbar-brand">编辑文章</a>
        </div>
        <div class="pull-right">
				<span class="navbar-brand">
					欢迎您！
				</span>
        </div>
    </div>
</nav>
<div>
    <table width="80%">
        <tr>
            <td colspan="2" align="right"><b>文章标题&nbsp;&nbsp;</b></td>
            <td colspan="12"><input id="articleTitle" class="form-control" placeholder="请输入文章标题" value="{{.ID}}"/></td>
        </tr>
    </table>
    <hr/>
    <div id="test-editormd">
        <textarea style="display:none;">{{.Content}}</textarea>
    </div>
</div>

<div class="container">
    <div id="controlPanel" class="container">
        <a id="backToIndexBtn" href="/" class="btn btn-success">返回首页</a>
        <a id="saveBtn" href="#" class="btn btn-primary">保存</a>
        <a id="resetBtn" href="#" class="btn btn-warning">重置</a>
        <a id="addToIndexBtn" class="btn btn-success" title="写完博客记得点我哦~">添加到首页链接</a>
    </div>
</div>

</body>
<script type="text/javascript">
    var testEditor;
    var articleId = '{{.ID}}';

    $(function () {
        testEditor = editormd("test-editormd", {
            width: "96%",
            height: window.innerHeight * 0.75,
            syncScrolling: "true",
            path: "/static/3part/editor.md-master/lib/",
            emoji: true,
            flowChart: true,
            tex: true,
            tocm: true,
            imageUpload: true,
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL: "/api/upload" // 服务器上传图片接口
        });

        /*
        // or
        testEditor = editormd({
            id      : "test-editormd",
            width   : "90%",
            height  : 640,
            path    : "../lib/"
        });
        */

        $('#saveBtn').click(function () {
            var mdContent = testEditor.getMarkdown();
            $.ajax({
                url: '/api/save',
                type: 'POST', //GET
                async: true,    //或false,是否异步
                data: {
                    mdContent: mdContent,
                    id: articleId,
                    nid: $('#articleTitle').val()
                },
                timeout: 5000,    //超时时间
                dataType: 'json',    //返回的数据格式：json/xml/html/script/jsonp/text
                success: function (data, textStatus, jqXHR) {
                    var ret = JSON.parse(data)
                    if (ret["code"] == 200) {
                        articleId = ret["id"]
                        $('#articleTitle').val(articleId)
                        alert('保存成功, 当前文章id为' + articleId)
                    }
                },
                error: function (xhr, textStatus) {
                    alert("错误");
                },
                complete: function () {
                }
            })
        })

        $('#addToIndexBtn').click(function () {
            var title = $('#articleTitle').val()
            $.ajax({
                url: '/api/add_to_index',
                type: 'POST', //GET
                async: true,    //或false,是否异步
                data: {
                    title: title,
                    /*id: articleId*/
                    id: title
                },
                timeout: 5000,    //超时时间
                dataType: 'json',    //返回的数据格式：json/xml/html/script/jsonp/text
                success: function (data, textStatus, jqXHR) {
                    var ret = JSON.parse(data)
                    if (ret["code"] == 200) {
                        alert('添加到首页成功！')
                    }
                },
                error: function (xhr, textStatus) {
                    alert("添加到首页失败！");
                },
                complete: function () {
                }
            })
        })
    });
</script>
</html>